import React, { Component } from 'react';
import '../styles/Login.css'
import { user_login } from '../api/login';
import { Button,Toast} from 'antd-mobile'
class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: '',
            pass: '',
            agree: false,
        }
    }
    changeCount(e) {

        this.setState({
            [e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
        })
    }
    register() {
        this.props.history.push('/register')
    }
    login() {
        if (!this.state.phone || !this.state.pass) {
            // alert("用户/密码不能为空")
            Toast.show({
                content: '用户/密码不能为空',
                position: 'bottom',
              })
            
        } else {
            if (!this.state.agree) {
               
                Toast.show({
                    content: '请先勾选用户登录协议',
                    position: 'bottom',
                  })
            } else {

                user_login({ phone: this.state.phone, pass: this.state.pass }).then(res => {
                    console.log(res)
                    console.log(res.data.userinfo)
                    if (res.data.code === 400) {
                       
                        Toast.show({
                            content: '用户未注册',
                            position: 'bottom',
                          })
                    } else {
                        
                        Toast.show({
                            content: '登录成功',
                            position: 'bottom',
                          })
                        localStorage.setItem("token", res.data.token)
                        localStorage.setItem("userid", res.data.userinfo.id)

                        this.props.history.push('/index')
                    }
                })
            }
        }




    }
    // componentDidMount() {
    //     user_login({ phone: localStorage.getItem("phone"), pass: localStorage.getItem("pass") }).then(res => {
    //         console.log(res)
    //     })
    // }
    render() {
        return (
            <div className='login'>
                <div className='lo_box'>
                    <img src="https://img1.baidu.com/it/u=453253244,3693084626&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1671210000&t=a1d8d1cd8cb756bdf842abe5f9d7bb13" alt="" />
                    <br />
                    <input name='phone' value={this.state.value} onChange={(e) => { this.changeCount(e) }} type="text" placeholder='请输入用户名' /><br />
                    <input name='pass' value={this.state.pass} onChange={(e) => { this.changeCount(e) }} type="password" placeholder='请输入密码' />

                    <div className='btn'>
                        <input type="checkbox" name='agree' checked={this.state.agree} onChange={(e) => { this.changeCount(e) }} className="check" /><span>勾选用户登录协议</span>

                        <Button block color='danger' size='large' onClick={() => { this.login() }}>
                            登录
                        </Button>
                        <Button block color='primary' size='large' onClick={() => { this.register() }}>
                            注册
                        </Button>


                    </div>

                </div>
            </div>
        );
    }
}

export default Login;